<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 文章生成系统</title>
    <!-- Tailwind CSS -->
    <script src="/storage/static/js/tailwindcss.3.4.16.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/storage/static/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/storage/static/css/style.css">
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <!-- Logo和标题 -->
        <div class="text-center">
            <div class="flex justify-center">
                <div class="bg-blue-600 rounded-full p-3">
                    <i class="fas fa-robot text-white text-4xl"></i>
                </div>
            </div>
            <h2 class="mt-6 text-3xl font-extrabold text-gray-900">
                文章生成系统
            </h2>
            <p class="mt-2 text-sm text-gray-600">
                登录以开始使用AI文章生成功能
            </p>
        </div>

        <!-- 登录表单 -->
        <form class="mt-8 space-y-6" method="post">
            <div class="rounded-md shadow-sm -space-y-px">
                <div>
                    <label for="username" class="sr-only">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-user text-gray-400"></i>
                        </div>
                        <input id="username" name="username" type="text" required 
                            class="appearance-none rounded-none relative block w-full px-3 py-3 pl-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" 
                            placeholder="用户名" value="admin">
                    </div>
                </div>
                <div>
                    <label for="password" class="sr-only">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fas fa-lock text-gray-400"></i>
                        </div>
                        <input id="password" name="password" type="password" required 
                            class="appearance-none rounded-none relative block w-full px-3 py-3 pl-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" 
                            placeholder="密码" value="admin">
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <input id="remember-me" name="remember-me" type="checkbox" 
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                        记住我
                    </label>
                </div>

                <div class="text-sm">
                    <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
                        忘记密码？
                    </a>
                </div>
            </div>

            <div>
                <button type="submit" 
                    class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                    <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                        <i class="fas fa-sign-in-alt text-blue-500 group-hover:text-blue-400"></i>
                    </span>
                    登录
                </button>
            </div>
        </form>

        <!-- 页脚 -->
        <div class="text-center text-sm text-gray-500">
            <p>文章生成系统 &copy; {{.currentYear}}</p>
        </div>
    </div>

    <!-- 自定义JS -->
    <script src="/storage/static/js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 添加表单提交动画
            const form = document.querySelector('form');
            form.addEventListener('submit', function(e) {
                const button = this.querySelector('button[type="submit"]');
                button.classList.add('loading');
                button.disabled = true;
            });

            // 添加输入框焦点效果
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('ring-2', 'ring-blue-500');
                });
                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('ring-2', 'ring-blue-500');
                });
            });
        });
    </script>
</body>
</html>